@import "../../variables.scss";

#snapshots {
  height: 100%;

  .content {
    height: calc(100% - #{$sidebar-toolbar-size});
    max-height: calc(100% - #{$sidebar-toolbar-size});
    overflow: auto;

    .item {
      padding: 3px;
      transition: All 0.2s;

      &:hover {
        background-color: rgba(0,0,0,0.1);
      }

      input[type=checkbox] {
        float: right;
        margin-right: 4px;
      }

      .un-select {
        float: right;
        background: url("delete.svg") no-repeat center transparent;
        background-size: 10px;
        display: inline-block;
        width: 12px;
        height: 18px;

        &:active, &:focus {
          outline: none;
        }
      }
    }
  }

  .toolbar {
    button {
      float: left;
      opacity: 0.7;
      transition: All 0.3s;
      display: inline-block;
      width: $sidebar-toolbar-size;
      height: $sidebar-toolbar-size;

      &:hover {
        opacity: 1;
      }

      &:active, &:focus {
        outline: none;
      }

      &.add {
        background: url("plus.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }

      &.show-all {
        background: url("show-all.svg") no-repeat center transparent;
        background-size: $sidebar-toolbar-size - 8px;
      }
    }
  }
}